<template>
	<view class="exam-item" @click="handleClick">
		<view class="exam-item-content">
			<view class="exam-item-title">{{item.title}}</view>
			<view class="exam-item-info">
				<view class="exam-item-tag" v-if="item.type">{{item.type}}</view>
				<view class="exam-item-tag exam-item-category" v-if="item.category">{{item.category}}</view>
				<!-- <view class="exam-item-time">{{formatDate(item.createTime || item.create_time)}}</view> -->
			</view>
			<!-- <view class="exam-item-desc" v-if="item.description">{{item.description}}</view> -->
			<view class="exam-item-details">
				<view class="exam-item-detail" v-if="item.duration">
					<text class="detail-label">试卷时长:</text>
					<text class="detail-value">{{item.duration}}分钟</text>
				</view>
				<view class="exam-item-detail" v-if="item.total_score || item.totalScore">
					<text class="detail-label">总分值:</text>
					<text class="detail-value">{{item.total_score || item.totalScore}}分</text>
				</view>
				<view class="exam-item-detail" v-if="item.pass_score || item.passScore">
					<text class="detail-label">及格分数:</text>
					<text class="detail-value">{{item.pass_score || item.passScore}}分</text>
				</view>
			</view>
			<view class="exam-item-time-range" v-if="item.start_time || item.startTime">
				<text class="time-label">试卷时间:</text>
				<text class="time-value">{{formatDate(item.start_time || item.startTime)}} ~ {{formatDate(item.end_time || item.endTime)}}</text>
			</view>
			<view class="exam-item-footer">
				<view class="exam-item-count">题目数量: {{item.questionCount || 0}}</view>
				<view class="exam-item-status" :class="classStatus[item.status]">{{getStatusText(item.status)}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ExamItem",
		props: {
			item: {
				type: Object,
				required: true
			}
		},
		data(){
			return {
				classStatus : {
					'not_started': 'status-not-started',
					'in_progress': 'status-in-progress',
					'completed': 'status-completed',
					'graded': 'status-graded'
				}
			}
		},
		methods: {
			// 处理点击事件
			handleClick() {
				this.$emit('click', this.item);
			},
			
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'not_started': '未开始',
					'in_progress': '进行中',
					'completed': '已完成',
					'graded': '已评分'
				};
				return statusMap[status] || '未开始';
			},
			
			// 获取状态样式类
			getStatusClass(status) {
				const classMap = {
					'not_started': 'status-not-started',
					'in_progress': 'status-in-progress',
					'completed': 'status-completed',
					'graded': 'status-graded'
				};
				return classMap[status] || 'status-not-started';
			},
			
			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '未设置';
				
				try {
					const date = new Date(dateStr);
					if (isNaN(date.getTime())) return '无效日期';
					
					return date.getFullYear() + '-' + 
						   this.padZero(date.getMonth() + 1) + '-' + 
						   this.padZero(date.getDate()) + ' ' + 
						   this.padZero(date.getHours()) + ':' + 
						   this.padZero(date.getMinutes());
				} catch (e) {
					return '无效日期';
				}
			},
			
			// 补零
			padZero(num) {
				return num < 10 ? '0' + num : num;
			}
		}
	};
</script>

<style lang="scss" scoped>
.exam-item {
	background-color: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
	
	&:active {
		transform: scale(0.98);
		box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.03);
	}
}

.exam-item-content {
	padding: 24rpx;
}

.exam-item-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 16rpx;
}

.exam-item-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 16rpx;
}

.exam-item-tag {
	background-color: #e8f4ff;
	color: #2979ff;
	font-size: 24rpx;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
	margin-right: 16rpx;
	margin-bottom: 8rpx;
}

.exam-item-category {
	background-color: #f0f9eb;
	color: #67c23a;
}

.exam-item-time {
	font-size: 24rpx;
	color: #999999;
	margin-left: auto;
}

.exam-item-desc {
	font-size: 26rpx;
	color: #666666;
	margin-bottom: 16rpx;
	line-height: 1.5;
}

.exam-item-details {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 16rpx;
	background-color: #f8f8f8;
	padding: 12rpx;
	border-radius: 8rpx;
}

.exam-item-detail {
	display: flex;
	align-items: center;
	margin-right: 24rpx;
	margin-bottom: 8rpx;
}

.detail-label {
	font-size: 24rpx;
	color: #666666;
	margin-right: 8rpx;
}

.detail-value {
	font-size: 24rpx;
	color: #333333;
	font-weight: 500;
}

.exam-item-time-range {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
	font-size: 24rpx;
}

.time-label {
	color: #666666;
	margin-right: 8rpx;
}

.time-value {
	color: #333333;
}

.exam-item-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16rpx;
	padding-top: 16rpx;
	border-top: 1rpx solid #f5f5f5;
}

.exam-item-count {
	font-size: 26rpx;
	color: #666666;
}

.exam-item-status {
	font-size: 26rpx;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
	font-weight: 500;
}

.status-not-started {
	background-color: #f2f6fc;
	color: #909399;
}

.status-in-progress {
	background-color: #ecf5ff;
	color: #409eff;
}

.status-completed {
	background-color: #f0f9eb;
	color: #67c23a;
}

.status-graded {
	background-color: #fdf6ec;
	color: #e6a23c;
}
</style>